// 静态资源
// noinspection JSUnusedLocalSymbols


import {ResourceApi} from "@ginstone/nga-api/dist/src/method/ResourceApi";
import {applyFactory} from "@/assets/js/autoCompletion";
import {emotes} from "@/assets/js/Emotes";
import {replaceResource} from "@/assets/js/routerUtils";
import {StorageUtils} from "@ginstone/common-utils/dist/src/utils/StorageUtils";
import {customEmotes} from "@/assets/js/CustomEmotes";

const EMOTE_CUSTOM_KEY = "EMOTE:custom"
//生成自定义表情自动完成数据的label字段
const getCustomEmoteLabel = (emote, index) => {
    if (typeof emote === 'object') {
        // 表情数据为对象
        return emote.name || index;
    } else if (typeof emote === 'string') {
        // 表情数据为字符串
        return index;
    }
    return Math.floor(Math.random() * 10000)
}
//生成自定义表情自动完成数据的apply字段
const getCustomEmoteApply = (emote) => {
    if (typeof emote === 'object') {
        // 表情数据为对象
        return emote.img
    } else if (typeof emote === 'string') {
        // 表情数据为字符串
        return emote
    }
    return undefined
}

export default {
    namespaced: true,
    state: {
        //ui数据
        commonUi: undefined,
        // 首页版面入口
        indexForums: [],
        // 官方表情包
        emoteGroups: [],
        // 字体
        fonts: [],
        // 颜色
        fontColor: [],
        // 字体大小
        fontSize: [],
        // 官方表情包自动完成
        emotesCompletion: [],
        // 字体颜色自动完成
        fontColorCompletion: [],
        // 字体大小自动完成
        fontSizeCompletion: [],
        // 字体自动完成
        fontsCompletion: [],
        // 自定义表情自动完成
        customEmotesCompletion: [],

        // 启用的自定义表情组名
        enableCustomEmotes: [],
    },
    mutations: {
        method(state, payload) {

        },
        // 加载自定义表情
        loadCustomEmotes(state, payload) {
            state.enableCustomEmotes = StorageUtils.get(EMOTE_CUSTOM_KEY) || [];
            this.commit("Resources/loadCustomEmotesCompletion")
        },
        // 设置自定义表情
        setCustomEmotes(state, data) {
            state.enableCustomEmotes = data;
            StorageUtils.put(EMOTE_CUSTOM_KEY, data)
            this.commit("Resources/loadCustomEmotesCompletion")
        },
        // 加载自定义表情自动完成数据
        loadCustomEmotesCompletion(state) {
            const arr = customEmotes.filter(i => state.enableCustomEmotes.includes(i.name)).flatMap(i => i.groups)

            state.customEmotesCompletion = arr.flatMap(group => {
                //分组名称
                const groupName = group.name

                return group.data.map((emote, i) => ({
                    label: "#" + groupName + ":" + getCustomEmoteLabel(emote, i),
                    apply: `[img]${getCustomEmoteApply(emote)}[/img]`,
                    detail: groupName,
                    info: (completion) => {
                        const e = document.createElement("img");
                        e.src = "/attachments" + getCustomEmoteApply(emote).substring(1)
                        return e;
                    },
                }))
            })

        },
    },
    actions: {
        resourcesInit: ({dispatch, commit, state, rootGetters}) => {
            ResourceApi.commonUi().then(res => {
                state.commonUi = res
                console.log(res)
            })
            ResourceApi.indexForums().then(res => {
                state.indexForums = res
            })
            ResourceApi.bbsCode().then(res => {
                const {fonts, fontColor, fontSize, emoteGroups} = res
                state.emoteGroups = emoteGroups
                state.fonts = fonts
                state.fontColor = fontColor
                state.fontSize = fontSize

                emoteGroups.flatMap(i => i.emotes).forEach(e => {
                    emotes[e.bbsCode] = e;
                })

                // 表情包自动完成数据
                emoteGroups.forEach(group => {
                    const {emotes, name} = group

                    emotes.forEach(({key, bbsCode, url}) => {
                        state.emotesCompletion.push({
                            label: "@" + key,
                            apply: bbsCode,
                            detail: `${name}:${key}`,
                            info: (completion) => {
                                const e = document.createElement("img");
                                e.src = replaceResource(url)
                                return e;
                            },
                        })
                    })
                })
                // 字体颜色自动完成
                state.fontColorCompletion = fontColor.map(color => ({
                    label: `[color=${color}]`,
                    detail: '颜色',
                    name: color,
                    info: (completion) => {
                        const e = document.createElement("span");
                        e.innerText = completion.name
                        e.style.backgroundColor = completion.name
                        return e;
                    },
                    apply: applyFactory(`[color=${color}]`, "[/color")
                }))
                // 字体大小自动完成
                state.fontSizeCompletion = fontSize.map(({label, value}) => ({
                    label: `[size=${value}]`,
                    detail: '大小',
                    size: value,
                    info: (completion) => {
                        const e = document.createElement("span");
                        e.innerText = label
                        e.style.fontSize = completion.size
                        return e;
                    },
                    apply: applyFactory(`[size=${value}]`, "[/size")
                }))
                // 字体自动完成
                state.fontsCompletion = fonts.map(({label, value}) => ({
                    label: `[font=${value}]`,
                    detail: '字体',
                    font: value,
                    info: (completion) => {
                        const e = document.createElement("span");
                        e.innerText = label
                        e.style.fontFamily = completion.font
                        return e;
                    },
                    apply: applyFactory(`[font=${value}]`, "[/font")
                }))

            })
        },
        method: ({dispatch, commit, state, rootGetters}, payload) => {

        },

    },
    getters: {},
}